<template>
    <div class="album-detail">
        <AlbumInfo :albumDetail="albumDetail"></AlbumInfo>
        <div class="content clearfix">
          <SongList class="song_info" :list="albumDetail.list" :showAlbum="false" :showSinger="true"></SongList>
          <div class="info">
            <div class="description">
              <div class="title">简介</div>
              <div class="info-content" v-html="albumDetail.album_desc" ref="infoContent"></div>
            </div>
            <div class="other-album">
                <div class="title">此歌手的其他专辑</div>
                <SingerAlbum :list="singerAlbum.list" :picSize="picSize" :count="6"></SingerAlbum>
            </div>
          </div>
        </div>
        <Comment :album_id="parseInt(this.$route.query.id)"></Comment>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import AlbumInfo from '@/components/Info/AlbumInfo/AlbumInfo'
    import SongList from '@/components/SongList/SongList'
    import Comment from '@/components/Comment/Comment'
    import SingerAlbum from '@/components/SingerAlbum/SingerAlbum'
    export default {
        name: "AlbumDetail",
        data(){
          return{
            picSize:150
          }
        },
        computed:{
          ...mapState(['albumDetail','singerAlbum']),
        },
        components:{
          AlbumInfo,
          SongList,
          Comment,
          SingerAlbum
        },
        mounted(){
          this.$store.dispatch('getAlbumDetail',this.$route.params.mid);
        },
        watch:{
          albumDetail(value){
            // console.log(value.singer_mid);
            this.$store.dispatch('getSingerAlbum',{picSize:this.picSize,singer_mid:value.singer_mid,order:'listen'})
          }
        },
        updated(){
          // console.log(this.$refs);
          // console.log(this.$refs.infoContent.clientHeight);
          if(this.$refs.infoContent.clientHeight>=200){
            this.$refs.infoContent.style.height='200px';
            this.$refs.infoContent.style.overflowY='auto';
          }else{
            this.$refs.infoContent.style.height=this.$refs.infoContent.clientHeight+'px';
            this.$refs.infoContent.style.overflowY='';
          }
        },
    }
</script>

<style scoped lang="less">
  .album-detail{
    background: linear-gradient(to bottom,#f2f2f2,#fafafa);
    .content{
      width: 1200px;
      margin: 30px auto 0;
      padding-bottom: 10px;
      display: flex;
      flex-direction: row;
      position: relative;
      .song_info{
        width: 860px;
      }
      .info{
        position: absolute;
        right: -20px;
        top:0px;
        width: 340px;
        .title{
          font-size: 20px;
          margin-bottom: 10px;
        }
        .info-content{
          font-size: 14px;
          line-height: 1.5;
          margin-bottom: 20px;
        }
        .other-album{
          margin-bottom: 50px;
        }
      }
    }
  }
</style>
